<template>
    <div style="height: 100%; width: 100%" ref="container">
        <div id="inspection" style="z-index: 10000" :style="{ width: width+'px', height: height+'px' }"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "InspectionForPdf",
        props: {
            width: {
                type: Number,
                default: 790,
            },
            height: {
                type: Number,
                default: 300,
            },
            data1: {
                type: Array, // 定义prop的类型为数组
                default: () => []
            }
        },
        mounted() {
            this.initChart();
            this.getData();
            window.addEventListener("resize", this.handleResizeEnd);
        },
        beforeDestroy() {
            window.removeEventListener("resize", this.handleResizeEnd);
        },
        data() {
            return {
                data: [],
                DTs: [],
                chartInstance: null,
                echart: echarts,
                recordInspectionCounts: [],
                recordMaintenanceCounts: [],
                legendFontSize: 12, // 初始图例文字大小
                resizeTimer: null // 定时器
            }
        },

        methods: {
            initChart() {
                this.chartInstance = this.echart.init(document.getElementById("inspection"));
            },
            async getData() {
                await this.updateData();
            },
            updateData() {
                const option = {
                    xAxis: {
                        axisLabel: {
                            interval: 0,//X轴信息全部展示
                            rotate: 60,//60 标签倾斜的角度
                        },
                        data: this.data1.map(item => item.dt),
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                    },
                    series: [
                        {
                            name: '巡检',
                            type: 'bar',
                            data: this.data1.map(item => item.recordInspectionCount),
                        }
                    ],
                    tooltip: {
                        axisPointer: {
                            type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
                            snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
                        },
                        showContent: true, // 是否显示提示框浮层，默认显示
                        triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
                        confine: true, // 是否将 tooltip 框限制在图表的区域内
                        backgroundColor: "#ffffff", // 提示框浮层的背景颜色
                        padding: 15, // 提示框浮层内边距，单位px
                        position: "top",
                        textStyle: {
                            color: "#000000", // 文字的颜色
                            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
                            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
                        },

                    },
                };
                this.chartInstance.setOption(option,true);
                this.handleResizeEnd()
            },
            handleResizeEnd() {
                clearTimeout(this.resizeTimer);
                this.resizeTimer = setTimeout(() => {
                    this.chartInstance.resize();
                    this.legendFontSize = Math.max(Math.floor(this.chartInstance.getWidth() / 100), 5);
                    this.initChart(); // 重新渲染 echarts 图表
                }, 1000); // 设置延迟时间，1000ms
            },
        }
    };
</script>

<style scoped>
</style>
